/* Base: mobile-first — stack A, B, C vertically */
.ia-grid {
  display: grid;
  grid-template-columns: 1fr;            /* single column on xs */
  grid-template-areas:
    "a"
    "c"
    "b";
  gap: 1rem;
}

/* Map elements to area names */
.ia-grid .area-a { grid-area: a; }
.ia-grid .area-b { grid-area: b; }
.ia-grid .area-c { grid-area: c; }

.ia-grid > * > .column > * {
  margin: 1rem;
}

/* md and up: two-column layout with B (main) first and A (sidebar) second */
@media (min-width: 768px) {
  .ia-grid {
    grid-template-columns: 1fr 320px;    /* main + sidebar */
    grid-template-areas:
      "b c"
      "b a";                             /* C spans under the sidebar */
    align-items: start;
  }
}

/* lg and up: three-column layout, A left, B center, C right */
@media (min-width: 992px) {
  .ia-grid {
    grid-template-columns: 240px 1fr 320px;
    grid-template-areas: "a b c";
  }
}